<template>
  <el-dialog title="礼包详情" v-model="visible" width="800px" @close="visible = false">
    <div class="main">
      <el-table v-loading="loading" height="500" size="default" :data="dataList">
        <el-table-column
          label="优惠券名称"
          min-width="150px"
          align="center"
          prop="couponName"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <el-link type="primary" :underline="false" @click="handleSkip(row)">{{
              row.couponName
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="赠券数" align="center" prop="couponCount" />
        <el-table-column label="类型" width="100px" align="center" prop="type">
          <template #default="{ row }">
            <div>
              {{ getType(row.type) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="优惠内容"
          width="150px"
          align="center"
          show-overflow-tooltip
          prop="details"
        />
        <el-table-column label="剩余" align="center" prop="surplusCount" />
        <el-table-column label="优惠券状态" width="100px" align="center" prop="status">
          <template #default="{ row }">
            <div>
              <el-link :underline="false" :type="getStatusType(row.status)">{{
                getStatusLabel(row.status)
              }}</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { getCouponPackDetailListApi } from '@/api/marketing/giftPack'
import { listDataApi } from '@/api/system/dict/data'

const dataList = ref([])
const visible = ref(false)
const loading = ref(true)

const queryParams = reactive({
  id: ''
})

function init(id, cityName) {
  visible.value = true
  queryParams.id = id
  queryParams.cityName = cityName
  getListData()
  getList()
}

function getList() {
  loading.value = true
  getCouponPackDetailListApi(queryParams.id)
    .then((res) => {
      loading.value = false
      dataList.value = res?.data?.rows || []
    })
    .catch(() => {
      loading.value = false
      dataList.value = []
    })
}

// ================ format数据 ====================
const ACTIVITY_TYPE = ref([])
const getListData = () => {
  listDataApi({ dictType: 'market_activity_type' }).then((res) => {
    ACTIVITY_TYPE.value = res?.rows.map((i) => {
      return {
        title: i.dictLabel,
        dec: i.remark,
        type: i.dictValue - 0
      }
    })
  })
}
function getType(type) {
  return ACTIVITY_TYPE.value.find((i) => {
    return i.type == type
  })?.title
}

// TODO:状态新增已禁用
const STATUS_OPTIONS = [
  {
    label: '进行中',
    status: 1,
    type: 'success'
  },
  {
    label: '已失效',
    status: 2,
    type: 'info'
  },
  {
    label: '已过期',
    status: 3,
    type: 'info'
  },
  {
    label: '待开始',
    status: 4,
    type: 'warning'
  },
  {
    label: '已删除',
    status: 0,
    type: 'danger'
  }
]
function getStatusType(status) {
  return STATUS_OPTIONS.find((i) => {
    return i.status === status
  })?.type
}

// 获取value
function getStatusLabel(status) {
  return STATUS_OPTIONS.find((i) => {
    return i.status === status
  })?.label
}

const router = useRouter()
// 跳转优惠券列表
function handleSkip(row) {
  // TODO:页面跳转
  router.push({
    path: '/market/activity',
    query: {
      id: row.id,
      couponName: row.couponName,
      cityName: queryParams.cityName
    }
  })
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.main {
  min-height: 300px;
}
</style>
